<template>
  <div class="home">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <h1>欢迎使用 Todo List!!</h1>
      <p>一个简单而强大的待办事项管理工具</p>
    </div>

    <!-- 功能特点 -->
    <div class="features-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8">
          <el-card class="feature-card">
            <template #header>
              <div class="card-header">
                <el-icon><Calendar /></el-icon>
                <span>任务管理</span>
              </div>
            </template>
            <div class="card-content">
              <p>轻松创建、编辑和删除待办事项</p>
              <p>标记任务完成状态</p>
              <p>分类查看不同状态的任务</p>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="8">
          <el-card class="feature-card">
            <template #header>
              <div class="card-header">
                <el-icon><User /></el-icon>
                <span>个人中心</span>
              </div>
            </template>
            <div class="card-content">
              <p>管理个人资料</p>
              <p>修改账号信息</p>
              <p>查看任务统计数据</p>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="8">
          <el-card class="feature-card">
            <template #header>
              <div class="card-header">
                <el-icon><Connection /></el-icon>
                <span>数据同步</span>
              </div>
            </template>
            <div class="card-content">
              <p>云端数据存储</p>
              <p>多设备数据同步</p>
              <p>安全的数据保护</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { Calendar, User, Connection } from '@element-plus/icons-vue'
</script>

<style scoped>
.home {
  padding: 20px;
}

.welcome-section {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #409EFF 0%, #36D1DC 100%);
  color: white;
  border-radius: 8px;
  margin-bottom: 40px;
}

.welcome-section h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

.welcome-section p {
  font-size: 1.2em;
  margin-bottom: 30px;
  opacity: 0.9;
}

.features-section {
  margin-top: 40px;
}

.feature-card {
  height: 100%;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header .el-icon {
  font-size: 20px;
  color: #409EFF;
}

.card-content {
  padding: 10px 0;
}

.card-content p {
  margin: 10px 0;
  color: #606266;
}

@media (max-width: 768px) {
  .el-col {
    margin-bottom: 20px;
  }
}
</style>
